<template>
  <ul class="hotlist">
    <li class="hotitem" v-for="item of hotlist" :key="item.proid">
      <div class="itemimg">
        <img :src="item.proimg" alt="">
      </div>
      <div class="iteminfo">
        <h3>{{ item.proname }}</h3>
        <!-- <div class="desc">{{ item.desc }}</div> -->
      </div>
      <!-- <span v-if="item.flag === 1" class="hot iconfont icon-hot"></span> -->
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    hotlist: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.hotlist {
  @include clearfix();
  @include rect(100%, auto);
  overflow: auto;
  white-space: nowrap;
  .hotitem {
    @include border(1px, #ccc, solid);
    @include rect(80px, auto);
    // white-space: normal;
    display: inline-block;
    .itemimg {
      @include rect(100%, auto);
      @include display(block);
      img {
        @include rect(100%, auto);
        @include display(block);
      }
    }
    .iteminfo {
      @include rect(100%, auto);
      @include display(block);
      h3 {
        @include ellipsis(100%, 1);
      }
      .desc {
        @include display(none);
      }
    }
  }
}
</style>